<template>
  <div class="message-board">
    <MessageList :messages="messages" :activeIndex="activeIndex" @select="handleSelect" />
    <MessageContent :message="selectedMessage" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MessageList from './MessageList.vue'
import MessageContent from './MessageContent.vue'

const messages = ref([
  { title: '消息1', content: '这是消息1的内容。' },
  { title: '消息2', content: '这是消息2的内容。' },
  { title: '消息3', content: '这是消息3的内容。' },
  { title: '消息4', content: '这是消息4的内容。' },
  { title: '消息5', content: '这是消息5的内容。' }
])

const activeIndex = ref('0')
const selectedMessage = ref(messages.value[0])

const handleSelect = (index) => {
  activeIndex.value = index
  selectedMessage.value = messages.value[index]
}
</script>

<style scoped>
.message-board {
  display: flex;
  height: 100%;
}
</style>